<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>牙科症状选择</title>
    <style>        body {
        font-family: Arial, sans-serif;
        background-color: #F8F8F8;
    }
    form {
        max-width: 600px;
        margin: 50px auto;
        padding: 20px;
        background-color: white;
        border-radius: 5px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }
    h2 {
        text-align: center;
        margin-bottom: 20px;
    }
    label {
        display: block;
        margin-bottom: 10px;
    }
    .checkbox-group {
        margin-bottom: 15px;
    }
    /* 修改这里，确保子选项垂直排列 */
    .checkbox-group label {
        display: block;
        margin: 5px 0; /* 上下外边距以实现垂直排列 */
    }
    button {
        display: block;
        width: 100%;
        padding: 10px;
        background-color: #007BFF;
        color: white;
        border: none;
        border-radius: 3px;
        cursor: pointer;
    }
    button:hover {
        background-color: #0056b3;
    }
    .hidden {
        display: none;
    }
    </style>
    <script>        function showSubSymptoms(option) {
        const subSymptoms = document.getElementById(`sub-symptoms-${option}`);
        subSymptoms.classList.toggle('hidden');
    }
    </script>
</head>
<body>
<form action="./index" method="post">
    <h2>症状概况选择</h2>
    <label><input type="checkbox" onclick="showSubSymptoms('color')"> 牙齿颜色变化</label><br>
    <div id="sub-symptoms-color" class="hidden checkbox-group">
        <hr />
        <!-- 牙齿颜色变化的多选 -->
        <label><input type="checkbox" name="color[]" value="牙齿表面出现白色或黄褐色斑点">牙齿表面出现白色或黄褐色斑点 </label>
        <label><input type="checkbox" name="color[]" value="牙冠出现淡黄色"> 牙冠出现淡黄色</label>
        <label><input type="checkbox" name="color[]" value="牙齿表面发黄"> 牙齿表面发黄</label>
        <label><input type="checkbox" name="color[]" value="牙齿表面为黄褐色或棕色"> 牙齿表面为黄褐色或棕色</label>
        <label><input type="checkbox" name="color[]" value="牙齿表面为灰色或深紫色"> 牙齿表面为灰色或深紫色</label>
        <label><input type="checkbox" name="color[]" value="牙齿表面有白垩色或棕色的对称性斑块"> 牙齿表面有白垩色或棕色的对称性斑块</label>
        <label><input type="checkbox" name="color[]" value="牙齿变色"> 牙齿变色</label>
        <hr />
    </div>

    <label><input type="checkbox" onclick="showSubSymptoms('shape')"> 牙齿形态变化</label><br>
    <div id="sub-symptoms-shape" class="hidden checkbox-group">
        <hr/>
        <!-- 牙齿形态变化的多选 -->
        <label><input type="checkbox" name="shape[]" value="牙齿出现龋洞"> 牙齿出现龋洞</label>
        <label><input type="checkbox" name="shape[]" value="牙体缺损"> 牙体缺损</label>
        <hr />
    </div>

    <label><input type="checkbox" onclick="showSubSymptoms('loose')"> 牙齿发生松动</label><br>
    <div id="sub-symptoms-loose" class="hidden checkbox-group">
        <hr />
        <!-- 牙齿松动的多选 -->
        <label><input type="checkbox" name="loose[]" value="牙齿轻微松动（摇晃不明显）"> 牙齿轻微松动（摇晃不明显）</label>
        <label><input type="checkbox" name="loose[]" value="牙齿有明显松动"> 牙齿有明显松动</label>
        <label><input type="checkbox" name="loose[]" value="牙齿脱落"> 牙齿脱落</label>
        <label><input type="checkbox" name="loose[]" value="牙齿可伸长">  牙齿可伸长</label>
        <hr />
    </div>

    <label><input type="checkbox" onclick="showSubSymptoms('pain')"> 牙齿异痛症状</label><br>
    <div id="sub-symptoms-pain" class="hidden checkbox-group">
        <hr />
        <!-- 牙齿疼痛的多选 -->
        <label><input type="checkbox" name="pain[]" value="对酸甜冷热等外界刺激敏感"> 对酸甜冷热等外界刺激敏感</label>
        <label><input type="checkbox" name="pain[]" value="敲击牙齿产生异痛"> 敲击牙齿产生异痛</label>
        <label><input type="checkbox" name="pain[]" value="牙齿有时疼痛"> 牙齿有时疼痛</label>
        <label><input type="checkbox" name="pain[]" value="牙齿时常疼痛"> 牙齿时常疼痛</label>
        <label><input type="checkbox" name="pain[]" onclick="showSubSymptoms('son')" value=" 牙齿咬合时敏感">牙齿咬合时敏感 </label>
        <div id="sub-symptoms-son" class="hidden checkbox-group">
            <hr/>
            <label><input type="checkbox" name="son[]" value="在下颌，头部等部位有异痛"> 在下颌，头部等部位有异痛</label>
            <hr/>
        </div>
        <label><input type="checkbox" name="pain[]" value="牙齿咬合时产生异痛"> 牙齿咬合时产生异痛</label>
        <hr />
    </div>

    <label><input type="checkbox" onclick="showSubSymptoms('odor')"> 牙齿异味</label><br>
    <div id="sub-symptoms-odor" class="hidden checkbox-group">
        <hr/>
        <!-- 牙齿异味的多选 -->
        <label><input type="checkbox" name="odor[]" value="口腔异味"> 口腔异味</label>
        <label><input type="checkbox" name="odor[]" value="牙龈出血"> 口腔异味严重</label>
        <hr/>
    </div>
    <label><input type="checkbox" onclick="showSubSymptoms('other')"> 其他</label><br>

    <div id="sub-symptoms-other" class="hidden checkbox-group">
        <hr/>
        <!-- 其他的多选 -->
        <label><input type="checkbox" name="other[]" value="牙龈出血"> 牙龈出血</label>
        <label><input type="checkbox" name="other[]" onclick="showSubSymptoms('other-son')" value="牙龈肿胀"> 牙龈肿胀</label>
        <div id="sub-symptoms-other-son" class="hidden checkbox-group">
            <hr/>
            <label><input type="checkbox" name="other-son[]" value="出现发热，乏力等全身症状"> 出现发热，乏力等全身症状</label>
            <hr/>
        </div>
        <label><input type="checkbox" name="other[]" value="牙龈出现脓包"> 牙龈出现脓包</label>
        <hr/>
    </div>

    <button type="submit">提交表单</button>
</form>
</body>
</html>
